<template>
<div>
  <van-nav-bar
      title="领券中心"
      left-arrow
      @click-left="$router.back()"
  />
    <div class="abox" v-for="item in coupon" :key='item.couponShowId'>
      <div class="bbox">
        <div>￥</div>
        <div>{{item.couponShowMoney}}</div>
      </div>
    <div class="box"></div>
      <div>
        <div class="cbox">{{item.couponShowName}}</div>
        <div class="dbox">有效期至：{{item.couponEndTime}}</div>
        <div class="ebox"><van-button plain hairline round size="small" @click="buyCoupon(item.couponShowId)">立即领取</van-button></div>
      </div>
  </div>
</div>
</template>
<script>
import { Toast } from 'vant';
export default {
name: "shopping",
  data() {
    return {
      coupon:[],
      userId:''
    };
  },
  created(){
    this.userId=JSON.parse(sessionStorage.getItem('user')).userId
    console.log(this.userId)
    this.$axios.post('/api/agoCoupon/All').then(res=>{
      // console.log(res)
      if(res.data.code==200){
        this.coupon=res.data.data
        console.log(this.coupon)
      }
    })
  },
  methods: {
    buyCoupon(v){
      // console.log(v)
      if(sessionStorage.getItem('isLogin')){
        this.$axios({
          method: 'post',
          url: '/api/agoCoupon/addCoupon',
          data:{
            userId:this.userId,
            couponShowId:v
          }
        }).then(res=>{
          console.log(res)
          if(res.data.code==200){
            Toast.success(res.data.msg)
          }else{
            Toast.fail(res.data.msg)
          }
        })
      }
    }
  },
}
</script>

<style scoped>
.abox{
  width: 86%;
  height: 100px;
  display: flex;
  background-image: linear-gradient(to right, #FF6932, #FFC80D);
  border-radius: 10px;
  margin: 20px auto 0;
  padding: 0 10px;
}
.bbox{
  width: 100px;
  display: flex;
  
}
.bbox>div:first-child{
  width: 30%;
  height: 100px;
  line-height: 100px;
  color: white;
  font-size: 20px;
}
.bbox>div:nth-child(2){
  width: 70%;
  height: 100px;
  line-height: 100px;
  color: white;
  font-size: 55px;
  font-weight: bold;
  text-align: center;
  font-family: '楷体';
  padding-right: 5px;
  margin-left: -5px;
}
.box{
  width: 20px;
  background-image:-webkit-gradient(
  linear,
  50% 50%,
  0 100%,
  from(transparent),
  color-stop(.5,transparent),
  color-stop(.5,white),
  to(white));
  background-size:14px 7px;
  background-repeat:repeat-y;
  background-position:0 100%;
  position: relative;
}
.cbox{
  color: white;
  font-size: 18px;
  font-weight: bold;
  margin-top: 5px;
  margin-bottom: 7px;
  text-align: left;
  padding-left: 10px;
}
.dbox{
  color: white;
  font-size: 15px;
  margin-top: 5px;
  margin-bottom: 7px;
  text-align: left;
  padding-left: 10px;
}
.ebox{
  width: 240px;
  text-align: right;
  color: white;
}
.ebox button{
  color: red;
}
</style>